<%@ page import="java.sql.DriverManager" %>
<%@ page import="java.sql.Connection" %>
<%@ page import="java.sql.PreparedStatement" %>
<%@ page import="java.sql.ResultSet" %>
<%@ page import="com.gzsz.util.DBUtil" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>排班表格</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <style>
        /* 自定义动画 */
        .animate-fade-in {
            animation: fadeIn 0.3s ease-out;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        /* 按钮悬停时的阴影效果 */
        .btn-hover-shadow:hover {
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }

        /* 表格行悬停效果 */
        .table-row-hover:hover {
            background-color: #f3f4f6;
        }
    </style>
</head>

<body class="bg-gray-100 font-sans">
<div class="container mx-auto py-8 px-4">
    <div class="flex justify-between items-center mb-4">
        <form action="YiHu.jsp" method="get" class="flex space-x-2">
            <input type="text" name="search" placeholder="请输入信息查询"
                   class="border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
            <input type="submit" value="查询"
                   class="bg-blue-500 text-white rounded-md px-4 py-2 hover:bg-blue-600 transition-colors btn-hover-shadow">
        </form>
        <div class="flex items-center">
            <a href="yihuguanli.jsp"
               class="bg-green-500 text-white rounded-md px-4 py-2 hover:bg-green-600 transition-colors btn-hover-shadow">
                添加信息
            </a>
            <!-- 添加返回按钮 -->
            <a href="#" id="backBtn"
               class="ml-2 text-gray-500 hover:text-gray-700 transition-colors">
                <i class="fa-solid fa-angle-left"></i> 返回
            </a>
        </div>
    </div>

    <div class="bg-white rounded-md shadow-md overflow-x-auto">
        <table class="table-auto w-full">
            <thead class="bg-gray-50">
            <tr>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">编号</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">姓名</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">性别</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">年龄</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">职称</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">联系电话</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">电子邮箱</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">数据操作</th>
            </tr>
            </thead>
            <tbody>
            <%
                DBUtil dbUtil = new DBUtil();
                String search = request.getParameter("search");
                String sql;
                PreparedStatement pstmt = null;
                ResultSet resultSet = null;
                try {
                    if (search != null && !search.isEmpty()) {
                        // 修改表名为正确的 medical_staff
                        sql = "select id,staff_name, gender, age, title, contact_number, email from yihu where  staff_name like? or contact_number like? or email like?";
                        pstmt = dbUtil.getConnection().prepareStatement(sql);
                        pstmt.setString(1, "%" + search + "%");
                        pstmt.setString(2, "%" + search + "%");
                        pstmt.setString(3, "%" + search + "%");
                    } else {
                        // 修改表名为正确的 medical_staff
                        sql = "select id,staff_name, gender, age, title, contact_number, email from yihu";
                        pstmt = dbUtil.getConnection().prepareStatement(sql);
                    }
                    resultSet = pstmt.executeQuery();
                    while (resultSet.next()) {
            %>
            <tr class="border-b table-row-hover">
                <td class="px-6 py-4"><%=resultSet.getInt("id")%></td>
                <td class="px-6 py-4"><%=resultSet.getString("staff_name")%></td>
                <td class="px-6 py-4"><%=resultSet.getString("gender")%></td>
                <td class="px-6 py-4"><%=resultSet.getInt("age")%></td>
                <td class="px-6 py-4"><%=resultSet.getString("title")%></td>
                <td class="px-6 py-4"><%=resultSet.getString("contact_number")%></td>
                <td class="px-6 py-4"><%=resultSet.getString("email")%></td>
                <td class="px-6 py-4">
                    <a href="YiHuDelete.jsp?id=<%=resultSet.getInt("id")%>"
                       onclick="return confirm('是否删除这条记录')"
                       class="text-red-500 hover:text-red-600 transition-colors">
                        <i class="fa-solid fa-trash"></i> 删除
                    </a>
                    <a href="YiHuDelete.jsp"
                       class="text-yellow-500 hover:text-yellow-600 transition-colors ml-2">
                        <i class="fa-solid fa-pen-to-square"></i> 编辑
                    </a>
                </td>
            </tr>
            <%
                    }
                } catch (Exception e) {
                    e.printStackTrace();
                } finally {
                    try {
                        if (resultSet != null) resultSet.close();
                        if (pstmt != null) pstmt.close();
                    } catch (Exception e) {
                        e.printStackTrace();
                    }
                }
            %>
            </tbody>
        </table>
    </div>
</div>

<script>
    // 获取返回按钮
    var backBtn = document.getElementById("backBtn");

    // 当用户点击返回按钮时，清空查询参数并重新加载页面
    backBtn.onclick = function (event) {
        event.preventDefault();
        window.location.href = "YiHu.jsp";
    };
</script>
</body>

</html>